<!-- 全屏拖动客服按钮 -->

<template>
	<!-- 移动区域容器 -->
	<movable-area 
		class="service-customer-comp-shell"
		:style="{'width':moveArea.width+'px','height':moveArea.height+'px'}"
	> 
		<!-- 移动小块 -->
		<movable-view 
			v-if="moveView.isDraw"
			direction="all" 
			class="service-customer-move-view" 
			:x="moveView.x" 
			:y="moveView.y"
			:inertia="false"
			:style="styleMoveView"
			@change="moveChange" 
			@touchend="onMouseEnd"
			@touchstart="onMouseStart" 
		>
			<!-- 点击按钮 -->
				<!-- open-type="contact" -->
			<button 
				@click="customerService"
				class="service-customer-btn-customer" 
			>
				<image 
					v-if="moveView.width>0"
					:style="styleMoveView" 
					src="@/pagesB/static/img/home/contact_icon.png"
				/>
			</button>
		</movable-view>
		<u-toast ref="uToast" />
	</movable-area>
</template>

<script>
	/**
	 * 全屏拖动客服按钮
	 * @description 全屏拖动客服按钮，傻逼杜先生开发
	 * @property {String} tag 组件标识，默认：customer-service
	 * @property {String,Boolean} navbar = [true|false] 页面是否存在系统导航栏
	 * @value true 页面有系统导航栏，默认
	 * @value false 页面没有系统导航栏
	 */
	import request from "@/pagesB/common/js/request/allRequest.js"
	export default {
		name: 'customer-service',
		props: {
			tag: { type: String, default: 'customer-service' },
			navbar: { type: [String,Boolean], default: 'true' }
		},
		
		// 页面数据
		data() {
			return {
				// 移动区域容器
				moveArea: {
					width: 200, // 宽度(px)
					height: 200, // 高度(px)
				},
				// 移动小块
				moveView: {
					isDraw: false, // 是否渲染移动块
					widthRpx: 130, // 148宽度(rpx)
					heightRpx: 162, // 184高度(rpx)
					width: 0, // 宽度(px)
					height: 0, // 高度(px)
					x: 0, // x坐标(px)
					y: 0, // y坐标(px)
					x_while: 0, // 临时x坐标(px)
					y_while: 0, // 临时y坐标(px)
					timer: null, // 自动贴边定时器
				},
				// 手势临时数据
				mouse: {
					isNeedDeal: false, // 是否有工作来了
					isPress: false, // 是否手指按下了
					limiter: null, // 更新频率限制器 (定时器对象)
				},
			}
		},
		
		// 计算属性
		computed: {
			// 移动小块style样式属性
			styleMoveView() {
				// 初始化样式
				var obj_style = '';
				
				// 如果存在了移动块宽高
				if (this.moveView.width > 0 && this.moveView.height > 0) {
					obj_style += 'width:' + this.moveView.width + 'px;';
					obj_style += 'height:' + this.moveView.height + 'px;';
				} 
				// 返回样式属性
				return obj_style;
			}
		},
		
		// 示例挂载完毕
		mounted() {
			// 获取屏幕大小
			uni.getSystemInfo({
			    success: (sysD) => {
					// 移动区域容器 宽度赋值
					this.moveArea.width = sysD.windowWidth;
					// 如果有系统导航栏
					if(this.navbar === true || this.navbar === 'true'){
						// 移动区域容器 高度赋值
						this.moveArea.height = sysD.windowHeight;
					}else{// 如果没有系统导航栏
						// 移动区域容器 高度赋值
						this.moveArea.height = Number(sysD.windowHeight - sysD.statusBarHeight - 44);
					}
					// 移动块 单位转化
					this.moveView.width = uni.upx2px(this.moveView.widthRpx);
					this.moveView.height = uni.upx2px(this.moveView.heightRpx);
					// 让移动块初始位于屏幕右侧
					//注释这句 canvas会影响层级让滑块居左
					// this.moveView.x = this.moveArea.width - this.moveView.width;
					this.moveView.y = (this.moveArea.height - this.moveView.height) / 1.1;
					// 手势临时数据与移动块相同
					this.moveView.x_while = Number(this.moveView.x);
					this.moveView.y_while = Number(this.moveView.y);
					// 渲染移动块
					this.moveView.isDraw = true;
				}
			});
		},
		
		// 实例销毁
		beforeDestroy() {
			// 更新频率限制器
			if (this.mouse.limiter) { clearTimeout(this.mouse.limiter)}
			// 自动贴边定时器
			if (this.moveView.timer) { clearTimeout(this.moveView.timer)}
		},
		
		// 页面事件
		methods: {
			// =================================== 数据处理
			// 让客服图标自动贴边
			autoWelt() {
				// 状态为“有工作来了”才执行
				if (this.mouse.isNeedDeal == true)
				{
					// 当前临时手势坐标(想要移动小块移动到的位置) 变量提出
					var X_while = Number(this.moveView.x_while);
					var Y_while = Number(this.moveView.y_while);
					// 当临时坐标 与 移动小块 坐标不相同时，才算有效，否则相当于没动
					if (X_while != this.moveView.x || Y_while != this.moveView.y)
					{
						// 1. 先让移动小块的x、y坐标到达“临时位置”
						this.moveView.x = X_while;
						this.moveView.y = Y_while;
						// 自动贴边定时器
						if (this.moveView.timer) { clearTimeout(this.moveView.timer); }
						this.moveView.timer = setTimeout(()=>{
							// 如果当前小块“偏左”
							if (this.moveView.x < ((this.moveArea.width - this.moveView.width) / 2))
							{
								// 让小块移动到左边
								this.moveView.x = 0;
							}
							// 如果当前小块“偏右”
							else {
								// 让小块移动到右边
								this.moveView.x = this.moveArea.width - this.moveView.width;
							}
							// 临时坐标也要跟随改变
							this.moveView.x_while = Number(this.moveView.x);
							this.moveView.y_while = Number(this.moveView.y);
							// 状态更改为：“没有工作了”
							this.mouse.isNeedDeal = false;
						}, 80);
					}
				}
			},
			//客服
			customerService(){
				request.getPhone({
					success:({mobile}) =>{
						uni.showActionSheet({
							itemList:["人工客服",mobile],
							itemColor:"#007AFF",
							success:({tapIndex}) =>{
								if(tapIndex===1){
									uni.makePhoneCall({
									 	phoneNumber:mobile
									 })
								}else if(tapIndex===0){
									uni.navigateTo({
										url:`/pages/customerService/index`
									})
								}
							}
						})
					},
					fail:(err) =>{
						this.$refs.uToast.show({
							title: '网络不佳,获取信息失败',
							type: 'error', 
							icon: false,
							position:"top"
						})
					}
				})
				
			},
			// =================================== 元素事件
			// 手指按下触发
			onMouseStart() {
				// 标记状态为“有工作来了”
				this.mouse.isNeedDeal = true;
				// 标记为“手指按下了”
				this.mouse.isPress = true;
			
			},
			// 手指松开触发
			onMouseEnd() {
				// 标记为“手指松开了”
				this.mouse.isPress = false;
				// 自动贴边处理
				this.autoWelt();
			},
			// 拖动过程中触发的事件
			moveChange(ev) {
				// 如果是主动拖动才执行
				if (ev.detail.source == 'touch'){
					// 先销毁 更新频率限制器
					if (this.mouse.limiter) { clearTimeout(this.mouse.limiter); }
					// 限制器定义
					this.mouse.limiter = setTimeout(()=>{
						// 手势临时数据 赋值
						this.moveView.x_while = ev.detail.x;
						this.moveView.y_while = ev.detail.y;
						// 如果手指松开了，执行一次自动贴边处理
						if (this.mouse.isPress == false) { this.autoWelt() }
					}, 500);
				}
			},
			
		},
		
	}
</script>


<style scoped>
	/* 组件容器外层 */
	.service-customer-comp-shell{
		position: fixed; left: 0; bottom: 0; z-index: 50;
		pointer-events: none;
	}
	/* 移动小块 */
	.service-customer-move-view{
		pointer-events: auto;
	}
	/* 客服按钮样式 */
	.service-customer-btn-customer{
		margin: 0; padding: 0;
		border: none;
		background: transparent;
		outline: none;
		box-sizing: border-box;
	}
	.service-customer-btn-customer::after {
		content: none;
		border: none;
	}
</style>